<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 异步获取数据</title>
    <style type="text/css">
        div{
            margin: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!-- vue ajax获取数据 -->
<div class="vue-ajax">
    <h1 class="bjy-category">{{ posts.category }}</h1>
    <ul class="bjy-article" v-for="item in posts.article">
        <li class="bjy-title">{{ item.title }}</li>
        <li class="bjy-author">{{ item.author }}</li>
    </ul>
</div>

<!-- 引入veujs -->
<script src="./js/vue.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="./js/vue-resource.min.js"></script>

<script>
// ajax 获取数据
var vm2=new Vue({
    el: '.vue-ajax',
    data: {
        posts:{}
    },
    // 页面加载的时候会自动执行ready
    ready: function(){
        // 等同于jquery的$.get()
        this.$http.get('data.php').then(function(response){
                this.posts=response.data;
            })
    }
});
</script>

</body>
</html>